<template>
  <div class="plan-header">
    <el-card class="box-cardff">
      <!-- 标题和基本信息区域 -->
      <div class="header-content">
        <div class="left-section">
          <h2 class="title">液压系统润滑保养计划</h2>
          <div class="info-section">
            <div class="info-item">
              <span class="label">创建人：</span>
              <span class="value">许合娇</span>
            </div>
            <div class="info-item">
              <span class="label">创建时间：</span>
              <span class="value">2025-07-12 10:04:39</span>
            </div>
          </div>
        </div>

        <div class="right-section">
          <div class="button-group">
            <el-button type="primary" size="small" plain @click="handleAdjust">调整计划</el-button>
            <el-button type="info" size="small" plain @click="handleClose">关闭</el-button>
            <el-button type="primary" size="small" plain @click="handleExport">导出</el-button>
            <el-button type="primary" size="small" plain @click="handlePrint">打印</el-button>
          </div>
          <div class="stamp">
            <img src="" alt="审批章">
          </div>
        </div>
      </div>

      <!-- 导航标签页 -->
      <div class="nav-tabs">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="计划信息" name="planInfo">
            <el-card class="box-cardgh">
              <div slot="header" class="card-header">
                <span>基础信息</span>
              </div>
              <el-form :model="formData" label-width="120px" class="info-form">
                <el-row :gutter="40">
                  <el-col :span="12">
                    <el-form-item label="计划编号：">
                      <span>{{ formData.planNo }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="计划名称：">
                      <span>{{ formData.planName }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="40">
                  <el-col :span="12">
                    <el-form-item label="计划开始时间：">
                      <span>{{ formData.startTime }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="计划结束时间：">
                      <span>{{ formData.endTime }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="40">
                  <el-col :span="12">
                    <el-form-item label="计划类型：">
                      <span>{{ formData.planType }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="执行周期规则：">
                      <span>{{ formData.executeRule }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="24">
                    <el-form-item label="执行规则描述：">
                      <span>{{ formData.ruleDescription }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="24">
                    <el-form-item label="备注：">
                      <span>{{ formData.remarks }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>

            <el-card class="box-card85">
              <div slot="header" class="card-header">
                <span>保养人员</span>
              </div>

              <el-form :model="formData" label-width="120px" class="staff-form">
                <el-row :gutter="40">
                  <el-col :span="12">
                    <el-form-item label="保养班组：">
                      <div class="input-with-select">
                        <el-input v-model="formData.team" placeholder="请选择保养班组" readonly>
                          <el-button slot="append" icon="el-icon-more" @click="handleSelectTeam"></el-button>
                        </el-input>
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="保养负责人：">
                      <div class="input-with-select">
                        <el-input v-model="formData.leader" placeholder="请选择保养负责人" readonly>
                          <el-button slot="append" icon="el-icon-more" @click="handleSelectLeader"></el-button>
                        </el-input>
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="24">
                    <el-form-item label="其他保养人：">
                      <div class="input-with-select">
                        <el-input v-model="formData.others" placeholder="请选择其他保养人" readonly>
                          <el-button slot="append" icon="el-icon-more" @click="handleSelectOthers"></el-button>
                        </el-input>
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>

            <el-card class="box-card489">
              <div slot="header" class="card-header">
                <span>保养项目</span>
              </div>

              <div class="operation-bar">
                <el-button type="primary" plain size="small" icon="el-icon-download" @click="handleExport">
                  导出
                </el-button>
              </div>

              <el-table :data="tableData" ref="multipleTable" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column prop="index" label="序号" width="120" align="center">
                </el-table-column>
                <el-table-column prop="itemName" label="保养项目" min-width="180">
                </el-table-column>
                <el-table-column prop="position" label="保养部位" min-width="180">
                </el-table-column>
                <el-table-column prop="level" label="保养等级" width="120" align="center">
                </el-table-column>
                <el-table-column prop="requirement" label="保养要求" min-width="180" align="center">
                </el-table-column>
              </el-table>
            </el-card>

            <el-card class="box-card303">
              <div slot="header" class="card-header">
                <span>附件</span>
              </div>

              <div class="operation-bar">
                <el-button type="primary" plain size="small" icon="el-icon-download" @click="handleBatchDownload">
                  批量下载
                </el-button>
              </div>

              <el-table :data="tableData2" style="width: 100%" @selection-change="handleSelectionChange2">
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column prop="index" label="序号" width="80" align="center">
                </el-table-column>
                <el-table-column prop="fileName" label="文件名" min-width="200" width="200" align="center">
                </el-table-column>
                <el-table-column prop="uploadTime" label="上传时间" width="200" align="center">
                </el-table-column>
                <el-table-column prop="uploader" label="上传者" width="200" align="center">
                </el-table-column>
                <el-table-column prop="fileSize" label="文档大小" width="200" align="center">
                </el-table-column>
                <el-table-column label="操作" width="200" align="center">
                  <template slot-scope="scope">
                    <el-button type="text" style="color: #67C23A" @click="handleDownload(scope.row)">
                      下载
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="设备信息" name="equipmentInfo">
            <el-card class="box-cardxx">
              <div slot="header" class="card-header">
                <span>设备信息</span>
              </div>
              <div class="operation-bar">
                <el-button type="primary" plain size="small" icon="el-icon-download" @click="handleExportxx">
                  导出
                </el-button>
              </div>
              <el-table :data="tableDataxx" style="width: 100%" @selection-change="handleSelectionChangexx">
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column prop="index" label="序号" width="60" align="center">
                </el-table-column>
                <el-table-column prop="equipmentNo" label="设备编号" min-width="150" align="center">
                </el-table-column>
                <el-table-column prop="equipmentName" label="设备名称" min-width="120" align="center">
                </el-table-column>
                <el-table-column prop="modelNo" label="规格型号" min-width="120" align="center">
                </el-table-column>
                <el-table-column prop="equipmentType" label="设备类型" min-width="120" align="center">
                </el-table-column>
                <el-table-column prop="brand" label="品牌" min-width="120" align="center">
                </el-table-column>
                <el-table-column prop="department" label="使用部门" min-width="120" align="center">
                </el-table-column>
                <el-table-column prop="location" label="存放位置" min-width="120" align="center">
                </el-table-column>
              </el-table>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="审核记录" name="auditRecord">
            <el-card class="box-cardhe">
              <div slot="header" class="card-header">
                <span>审核记录</span>
              </div>

              <div class="operation-bar">
                <el-button type="primary" plain size="small" icon="el-icon-download" @click="handleExporthe">
                  导出
                </el-button>
              </div>

              <el-table :data="tableDatahe" style="width: 100%" @selection-change="handleSelectionChangehe">
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column prop="index" label="序号" width="80" align="center">
                </el-table-column>
                <el-table-column prop="position" label="操作节点" min-width="150" align="center">
                </el-table-column>
                <el-table-column prop="operator" label="操作人" min-width="120" align="center">
                </el-table-column>
                <el-table-column prop="operation" label="操作" min-width="120" align="center">
                  <template slot-scope="scope">
                    <span :class="getOperationClass(scope.row.operation)">
                      {{ scope.row.operation }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column prop="operationTime" label="操作时间" min-width="180" align="center">
                </el-table-column>
                <el-table-column prop="auditContent" label="审批内容" min-width="180" align="center">
                  <template slot-scope="scope">
                    <span class="audit-content">{{ scope.row.auditContent || '-' }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="操作记录" name="operationRecord">
            <el-card class="box-cardcao">
              <div slot="header" class="card-header">
                <span>操作记录</span>
              </div>

              <div class="operation-bar">
                <el-button type="primary" plain size="small" icon="el-icon-download" @click="handleExportcao">
                  导出
                </el-button>
              </div>

              <el-table :data="tableDatacao" style="width: 100%" @selection-change="handleSelectionChangecao">
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column prop="index" label="序号" width="80" align="center">
                </el-table-column>
                <el-table-column prop="operator" label="操作人" min-width="120" align="center">
                </el-table-column>
                <el-table-column prop="operationTime" label="操作时间" min-width="180" align="center">
                </el-table-column>
                <el-table-column prop="operationContent" label="操作内容" min-width="200" align="center">
                </el-table-column>
              </el-table>

              <div class="pagination-container">
                <el-pagination @size-change="handleSizeChangecao" @current-change="handleCurrentChangecao"
                  :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
              </div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>

    <el-dialog title="计划调整" :visible.sync="visible" width="800px" :close-on-click-modal="false"
      class="plan-adjust-dialog">

      <el-form :model="formDataTi" :rules="rules" ref="adjustForm" label-width="120px" size="small">

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="计划编号">
              <el-input v-model="formDataTi.planNo" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划名称">
              <el-input v-model="formDataTi.planName" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="计划开始时间">
              <el-input v-model="formDataTi.startTime" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划结束时间">
              <el-input v-model="formDataTi.endTime" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="保养班组">
              <el-input v-model="formDataTi.team" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保养负责人">
              <el-input v-model="formDataTi.leader" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="其他保养人">
          <el-input v-model="formDataTi.others" disabled></el-input>
        </el-form-item>

        <el-form-item label="调整类型" prop="adjustType">
          <el-select v-model="formDataTi.adjustType" placeholder="请选择调整类型" style="width: 100%">
            <el-option label="调整计划时间" value="time"></el-option>
            <el-option label="调整保养人员" value="person"></el-option>
            <el-option label="其他调整" value="other"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="调整结束日期" prop="adjustEndDate">
          <el-date-picker v-model="formDataTi.adjustEndDate" type="date" placeholder="请选择日期" style="width: 100%">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="调整原因" prop="adjustReason">
          <el-input type="textarea" v-model="formDataTi.adjustReason" :rows="4" placeholder="请输入调整原因">
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'PlanHeader',
  data() {
    return {
      visible: false,
      formDataTi: {
        planNo: 'ME1010',
        planName: '液压系统润滑保养计划',
        startTime: '2022-07-22',
        endTime: '2022-07-22',
        team: '设备润滑班组',
        leader: '俊豪松',
        others: '李华、张敏、杨静、赵嘉',
        adjustType: '',
        adjustEndDate: '',
        adjustReason: ''
      },
      rules: {
        adjustType: [
          { required: true, message: '请选择调整类型', trigger: 'change' }
        ],
        adjustEndDate: [
          { required: true, message: '请选择调整结束日期', trigger: 'change' }
        ],
        adjustReason: [
          { required: true, message: '请输入调整原因', trigger: 'blur' }
        ]
      },
      //操作记录
      tableDatacao: [
        {
          index: 1,
          operator: 'admin',
          operationTime: '2026-06-07 20:00:00',
          operationContent: ''
        },
        {
          index: 2,
          operator: 'admin',
          operationTime: '2026-06-07 20:00:00',
          operationContent: ''
        },
        {
          index: 3,
          operator: 'admin',
          operationTime: '2026-06-07 20:00:00',
          operationContent: ''
        },
        {
          index: 4,
          operator: 'admin',
          operationTime: '2026-06-07 20:00:00',
          operationContent: ''
        },
        {
          index: 5,
          operator: 'admin',
          operationTime: '2026-06-07 20:00:00',
          operationContent: ''
        }
      ],
      selectedRowscao: [],
      currentPage: 1,
      pageSize: 10,
      total: 45,
      //审核
      tableDatahe: [
        {
          index: 1,
          position: '提交节点',
          operator: '乾娟雅',
          operation: '提交',
          operationTime: '2022-07-12 10:04:39',
          auditContent: '-'
        },
        {
          index: 2,
          position: '仓库管理员',
          operator: '赵文函',
          operation: '通过',
          operationTime: '2022-07-12 12:20:12',
          auditContent: ''
        },
        {
          index: 3,
          position: '部门经理',
          operator: '萧文函',
          operation: '通过',
          operationTime: '2022-07-13 10:04:39',
          auditContent: ''
        }
      ],
      selectedRowshe: [],
      //设备信息
      tableDataxx: [
        {
          index: 1,
          equipmentNo: 'SB2022111713202',
          equipmentName: '机床',
          modelNo: 'CNC-500',
          equipmentType: '生产设备',
          brand: '不知名品牌',
          department: '生产部门',
          location: '生产车间'
        },
        {
          index: 2,
          equipmentNo: 'SB2022111713202',
          equipmentName: '机床',
          modelNo: 'CNC-500',
          equipmentType: '生产设备',
          brand: '不知名品牌',
          department: '生产部门',
          location: '生产车间'
        },
        {
          index: 3,
          equipmentNo: 'SB2022111713202',
          equipmentName: '机床',
          modelNo: 'CNC-500',
          equipmentType: '生产设备',
          brand: '不知名品牌',
          department: '生产部门',
          location: '生产车间'
        },
        {
          index: 4,
          equipmentNo: 'SB2022111713202',
          equipmentName: '机床',
          modelNo: 'CNC-500',
          equipmentType: '生产设备',
          brand: '不知名品牌',
          department: '生产部门',
          location: '生产车间'
        },
        {
          index: 5,
          equipmentNo: 'SB2022111713202',
          equipmentName: '机床',
          modelNo: 'CNC-500',
          equipmentType: '生产设备',
          brand: '不知名品牌',
          department: '生产部门',
          location: '生产车间'
        }
      ],
      selectedRowsxx: [],
      //文件表格数据
      tableData2: [
        {
          index: 1,
          fileName: '使用说明书.PDF',
          uploadTime: '2026-07-14 10:04:39',
          uploader: '郭靖靖',
          fileSize: '2KB'
        },
        {
          index: 2,
          fileName: '使用说明书.PDF',
          uploadTime: '2026-07-14 10:04:39',
          uploader: '郭靖靖',
          fileSize: '2KB'
        },
        {
          index: 3,
          fileName: '使用说明书.PDF',
          uploadTime: '2026-07-14 10:04:39',
          uploader: '郭靖靖',
          fileSize: '2KB'
        }
      ],
      selectedRows2: [],
      //保养项目
      tableData: [
        {
          index: 1,
          itemName: '润滑油更换',
          position: '液压系统',
          level: '一级',
          requirement: '润滑'
        },
        {
          index: 2,
          itemName: '润滑油更换',
          position: '液压系统',
          level: '一级',
          requirement: '润滑'
        },
        {
          index: 3,
          itemName: '润滑油更换',
          position: '液压系统',
          level: '一级',
          requirement: '润滑'
        },
        {
          index: 4,
          itemName: '润滑油更换',
          position: '液压系统',
          level: '一级',
          requirement: '润滑'
        },
        {
          index: 5,
          itemName: '润滑油更换',
          position: '液压系统',
          level: '一级',
          requirement: '润滑'
        }
      ],
      selectedRows: [],
      formData: {
        planNo: 'BYJH-2022072198',
        planName: '液压系统润滑保养计划',
        startTime: '2022-07-18',
        endTime: '2022-08-18',
        planType: '周计划',
        executeRule: '执行月规则00253',
        ruleDescription: '每2周的星期二，星期三，星期四，在08:00和13:00之间执行',
        remarks: ''
      },
      activeTab: 'planInfo'
    }
  },
  methods: {
    //调整计划
    show() {
      this.visible = true
    },
    handleCancel() {
      this.visible = false
      this.$refs.adjustForm.resetFields()
    },
    handleConfirm() {
      this.$refs.adjustForm.validate((valid) => {
        if (valid) {
          this.$message.success('提交成功')
          this.visible = false
          this.$refs.adjustForm.resetFields()
        }
      })
    },
    //操作记录
    handleSelectionChangecao(val) {
      this.selectedRowscao = val
    },
    handleExportcao() {
      this.$message.success('开始导出操作记录')
    },
    handleSizeChangecao(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChangecao(val) {
      this.currentPage = val
      this.fetchData()
    },
    fetchData() {
      // 这里实现获取数据的逻辑
      this.$message.info(`加载第 ${this.currentPage} 页，每页 ${this.pageSize} 条`)
    },
    //审核记录
    handleSelectionChangehe(val) {
      this.selectedRowshe = val
    },
    handleExporthe() {
      this.$message.success('开始导出审核记录')
    },
    getOperationClass(operation) {
      const classMap = {
        '提交': 'operation-submit',
        '通过': 'operation-pass',
        '驳回': 'operation-reject'
      }
      return classMap[operation] || ''
    },
    //设备信息
    handleSelectionChangexx(val) {
      this.selectedRowsxx = val
    },
    handleExportxx() {
      this.$message.success('开始导出设备信息')
    },
    //文件
    handleSelectionChange2(val) {
      this.selectedRows = val
    },
    handleDownload(row) {
      this.$message.success(`开始下载文件：${row.fileName}`)
    },
    handleBatchDownload() {
      if (this.selectedRows.length === 0) {
        return this.$message.warning('请选择要下载的文件')
      }
      this.$message.success(`开始下载 ${this.selectedRows.length} 个文件`)
    },
    handleSelectionChange(val) {
      this.selectedRows = val
    },
    handleExport() {
      this.$message.success('开始导出数据')
    },
    handleAdjust() {
      this.visible = true
      this.$message.success('打开调整计划弹窗')
    },
    handleClose() {
      this.$confirm('确认关闭当前页面?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.go(-1)
      }).catch(() => { })
    },
    handleExport() {
      this.$message.success('开始导出数据')
    },
    handlePrint() {
      this.$message.success('开始打印')
    }
  }
}
</script>

<style scoped>
.maintenance-items {
  padding: 20px;
}

.box-cardcao {
  width: 1200px;
  margin-left: 5px;
  margin-bottom: 20px;
}

.box-cardhe {
  width: 1200px;
  margin-left: 5px;
  margin-bottom: 20px;
}

.box-cardxx {
  width: 1200px;
  margin-left: 5px;
  margin-bottom: 20px;
}

.box-card303 {
  width: 1200px;
  margin-left: 5px;
  margin-bottom: 20px;
}

.card-header {
  font-size: 16px;
  font-weight: 500;
}

.operation-bar {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
}

.el-table {
  margin-bottom: 20px;
}

.el-table th {
  background-color: #F5F7FA;
  color: #606266;
  font-weight: 500;
  height: 40px;
}

.el-table td {
  padding: 8px 0;
}

.el-button--small {
  padding: 8px 15px;
}

/* 斑马纹样式 */
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #FAFAFA;
}

/* 鼠标悬停效果 */
.el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: #F5F7FA;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .maintenance-items {
    padding: 10px;
  }

  .el-table {
    width: 100%;
    overflow-x: auto;
  }
}

.box-card489 {
  width: 1200px;
  margin-left: 5px;
  margin-bottom: 20px;
}

.info-form {
  padding: 20px 0;
  margin-left: 50px;
}

.box-card85 {
  width: 1200px;
  margin-left: 5px;
  margin-bottom: 20px;
}

.box-cardgh {
  width: 1200px;
  margin-left: 5px;
  margin-bottom: 20px;
}

.box-cardff {
  /* width: 1200px; */
  margin-left: 5px;
  margin-bottom: 20px;
}

.plan-header {
  background-color: #fff;
  padding: 20px;
  width: 100hv;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #EBEEF5;
}

.left-section {
  flex: 1;
}

.title {
  font-size: 20px;
  color: #303133;
  margin: 0 0 15px 0;
  font-weight: 500;
}

.info-section {
  display: flex;
  gap: 20px;
}

.info-item {
  font-size: 14px;
  color: #606266;
}

.label {
  color: #909399;
}

.right-section {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.button-group {
  display: flex;
  gap: 10px;
}

.stamp {
  width: 80px;
  height: 80px;
}

.stamp img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nav-tabs {
  margin-top: 20px;
  width: 100hv;
}

.el-tabs__header {
  margin-bottom: 0;
}

.el-button {
  padding: 8px 15px;
}

.el-button--small {
  font-size: 13px;
}

.el-tabs__item {
  font-size: 14px;
}

.el-tabs__item.is-active {
  color: #67C23A;
}

.el-tabs__active-bar {
  background-color: #67C23A;
}
</style>
